<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="generator" content="" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<link href="css/haiersoft.css" rel="stylesheet" type="text/css" media="screen,print" />
	<link href="css/pagination.css" rel="stylesheet" type="text/css">
	<link href="css/xin.css" rel="stylesheet" type="text/css">

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->
	<style type="text/css">
		.operation {
			cursor: pointer;
		}
		.banDel {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.29);
			position: fixed;
			top: 0px;
			display: none;
			left: 0;
		}
		.delete {
			width: 460px;
			margin: auto;
			background-color: #fff;
			text-align: center;
			position: relative;
			top: 20%;
		}
		.delete .close {
			height: 30px;
			text-align: right;
		}
		.delete .close img {
			margin-right: 5px;
			margin-top: 5px;
			cursor: pointer;
		}
		.banDel .delete .delP1 {
			margin-top: 40px;
			font-size: 20px;
		}
		.banDel .delete .delP2 {

		}
		.banDel .delete .delP2 .ok {
			display: inline-block;
			width: 100px;
			height: 40px;
			line-height: 40px;
			background-color: #3695cc;
			color: #fff;
			margin-top: 65px;
			margin-left: 25px;
			margin-right: 25px;
			font-size: 16px;
			cursor: pointer;
			margin-bottom: 65px;
		}
		.banDel .delete .delP2 .yes {
			color: #333;
			background-color: #fff;
			border: 1px solid #3695cc;
		}
		table.gridtable {
			font-family: verdana,arial,sans-serif;
			font-size:11px;
			color:#333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
			width: 360px;
			height: 110px;
			margin-left: 50px;
		}
		table.gridtable th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #dedede;
		}
		table.gridtable td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #ffffff;
		}
	</style>
</head>

<body>


<!-- MainForm -->
<div id="rrapp">
	<div>
		<div class="form_boxA">
			<table cellpadding="0" cellspacing="0">
				<tr>
					<th>序号</th>
					<th>名字</th>
					<th>性别</th>
					<th>杯</th>
				</tr>
				<tr v-for="(item,index) in users">
					<td>{{index + 1}}</td>
					<td>{{item.name}}</td>
					<td>{{item.sex}}</td>
					<td>{{item.cup}}</td>
				</tr>
			</table>
			<div class="pagination" style="text-align: right; padding-right: 100px;"></div>
		</div>
	</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.pagination.js"></script>
<script type="text/javascript">
var flag = true;
var limit = 10;
var vm = new Vue({
    el: "#rrapp",
    data: {
        users:[],
    },
    mounted: function () {
        this.$nextTick(function () {
            vm.pageUser();
        })
    },
    methods: {
        /**
         * 回显
         * @param currPage
         */
        pageUser: function (currPage) {
            if (!$.isNumeric(currPage)) {
                currPage = 0;
            }
            $.ajax({
                url: 'https://wangzong111.utools.club/page1/'+currPage + 1+'/'+limit,
                type: "GET",
                dataType: "json",
                success: function (r) {
                    if (r.code == 0) {
                        if (flag) {
                            $(".pagination").pagination(r.data.total, {
                                items_per_page: limit,
                                num_edge_entries: 1,
                                num_display_entries: 5,
                                callback: vm.pageUser//回调函数
                            });
                            flag = false;
                        }
                            vm.users=r.data.list;
                    }
                }
            })
        },
    }
});


</script>


</html>